/**
* 底部组建
*/
<template>
  <div>
    <div class="h-footer" v-if="terminal === 'pc'">
      <div class="h-footer-nar">
        <dl :key="item.name" v-for="item in footerData" >
         
            <dt>{{ item.name }}</dt>
            <dd :key="val.id" v-for="val in item.list" @click="handleRouterClick(val)">
            <template v-if="val.name==='微信'">
             <li class="h-wx">
               <p>{{ val.name }}</p>
              <!-- <p>{{ item.name }}</p> -->
               <img src="@/assets/img/qr-code.jpg"/>
              </li>
            </template>
            <template v-else>{{ val.name }}</template>
              
              </dd>
            
         
            
        </dl>
      </div>
      
      <address class="h-address">
        <svg aria-hidden="true" class="icon">
            <use xlink:href="#iconguohui"></use>
        </svg>
        <!-- 津公网安备 44030302000229号 -->
        <p><a href="http://beian.miit.gov.cn" target="_blank">津ICP备19012040号-6</a> 版权所有@2000-2020 天津金友福珠宝</p>
      </address>
    </div>
    <div v-else>
      <ul class="h-foot-ph">
        <li>
          <a href="tel:400-116-8558">
            <i class="iconfont icondianhua"></i>
            <p>电话</p>
          </a>
        </li>
        <li @click="handleFootClick('wx')">
          <!-- <i class="iconfont iconweixin"></i> -->
            <img src="@/assets/img/qr-code.jpg" style="width:25px;"/>
          <p>微信</p>
        </li>
        <li @click="handleFootClick('share')">
          <i class="iconfont iconfenxiang"></i>
          <p>分享</p>
        </li>
      </ul>
      <!-- 微信二维码 弹窗 -->
      <el-dialog :visible.sync="dialogVisible" :show-close="false" width="70%" >
        <img src="@/assets/img/qr-code.jpg" class="qr-code" >
      </el-dialog>
      <!-- 分享列表 -->
      <el-drawer title="分享到" :visible.sync="drawer" height="auto" direction="btt" :show-close="false">
        <ul class="h-share">
          <li><a href="http://service.weibo.com/share/share.php?url=http%3A%2F%2Fwww.tjjyfzb.com%&amp;title=%E9%87%91%E5%8F%8B%E7%A6%8F%E7%8F%A0%E5%AE%9D" data-am-share-to="weibo">
          <svg aria-hidden="true" class="icon">
            <use xlink:href="#iconweibo"></use>
          </svg>
          <span>新浪微博</span></a>
          </li>
          <li><a href="http://connect.qq.com/widget/shareqq/index.html?url=http%3A%2F%2Fwww.tjjyfzb%&amp;title=%E9%87%91%E5%8F%8B%E7%A6%8F%E7%8F%A0%E5%AE%9D" data-am-share-to="qq">
          <svg aria-hidden="true" class="icon">
            <use xlink:href="#iconqq"></use>
          </svg>
          <span>QQ 好友</span></a>
          </li>
          <li><a href="[qrcode]?url=http%3A%2F%2Fwww.tjjyfzb.com%&amp;title=%E9%87%91%E5%8F%8B%E7%A6%8F%E7%8F%A0%E5%AE%9D" data-am-share-to="wechat">
          <svg aria-hidden="true" class="icon">
            <use xlink:href="#iconweixin"></use>
          </svg>
          <span>微信</span></a>
          </li>
        </ul>
        <div class="demo-drawer__footer">
        <el-button style="width:100%;margin-top:20px;" size="medium" :autofocus="true" @click="cancelForm">取 消</el-button>
       
      </div>
      </el-drawer>
    </div>
  </div>
</template>
<script>
//import { footerList } from '@/mock' // 脚部数据
import { footerData } from '@/api'

export default {
  name: 'FooterBar',
  props: {},
  data () {
    return {
      terminal: '', // 终端类型
      footerData: [],
      drawer: false, // 分享 图层
      dialogVisible: false, // 弹窗 flag
      wxqrcode:false
    }
  },
  created () {
    this.terminal = localStorage.getItem('terminalm')
    console.log('this.terminal***', this.terminal)
     this.getFooterData() // 底部数据加载
  },
  mounted () {
    //this.footerData = footerList.result // 使用接口时 此处删除
  },
  methods: {
    cancelForm() {
      this.drawer = false;
    },
    getFooterData () {
      const params = { // 请求参数 --- 根据情况 是否需要
        id: '111'
      }
      footerData(params).then(res => {
        this.footerData = res
      })
    },
    /**
     *@Description
     *@Param
     *@Return 点击微信、分享 弹窗事件.
     **/
    handleFootClick(type){
      if(type === 'wx'){
        this.dialogVisible = true
      } else {
        this.drawer = true
      }
    },
    /**
     *@Description
     *@Param
     *@Return 点击跳转路由.
     **/
    handleRouterClick (item) {
      if(item.url !== undefined && item.url !=="" && item.router ==='')
      {
        window.open(item.url,'_self') // 替换当前页面
      }else if(item.url !== undefined && item.url !=="" && item.router ==="http")
      {
        window.open(item.url,'_blank') // 新窗口打开外链接
      } else if (item.name ==='微信'){
        console.log(item)
        this.wxqrcode = true
      }
      else
      {
      this.$router.push({ name: item.router, params: { id: item.id } })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  .h-footer {
      padding: 20px 0;
      background: #f5e5e9;
      .h-footer-nar {
          overflow: hidden;
          margin-bottom: 40px;
      }
      
      dl {
          font-size: 12px;
          float: left;
          box-sizing: border-box;
          width: calc(100% / 6);
          padding: 0 30px;
          color: #333;
      }
      dt {
          margin-bottom: 10px;
          padding-bottom: 15px;
          border-bottom: 1px dashed #666;
      }
      dd {
          line-height: 20px;
          margin-left: 0;
          cursor: pointer;
          &:hover {
              text-decoration: underline;
              color: #900028;
          }
          .h-wx{
            img{
            display:none;
            position: absolute;
              bottom: 165px;
              right: 20;
              width: 140px;
            }
          }
          .h-wx:hover {
            img {
                display: block;
            }
           }
        }
  }
  .h-address {
      font-style: normal;
      text-align: center;
      .icon {
          font-size: 20px;
      }
  }
  /* 移动 */
  .h-foot-ph{
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 60px;
    color: #fff;
    background: #9a0630;
    li{
      width: calc(100% / 3);
      padding-top: 7px;
      float: left;
      text-align: center;
      i{
        font-size: 25px;
      }
      a{
        text-decoration: none;
        color: #fff;
      }
    }
    .el-drawer{
      height:auto !important;
    }
    .el-drawer__header>:first-child {
    text-align: center !important;
    }
  }
  .qr-code{
    width: 100%;
  }
  .h-share{
    li{
      width: calc(100% / 3);
      margin-bottom: 10px;
      float: left;
      text-align: center;
      a{
        text-decoration: none;
      }
      svg{
        font-size: 35px;
      }
      span{
        display: block;
        margin-top: 5px;
      }
    }
  }
</style>
